<template>  
  <div class="novel-display" @click="novelDetail(novel.id)">  
    <img :src="novel.coverImage" alt="小说封面" class="cover-image" />  
    <div class="info">  
      <h1>{{ novel.title }}</h1>  
      <p><strong>作者:</strong> {{ novel.author }}</p>  
      <p><strong>简介:</strong> {{ novel.description }}</p>
      <p><strong>分类:</strong> {{ novel.novelKind }}</p>
      <p><strong>阅读量:</strong> {{ novel.views }}</p>  
      <p><strong>{{ novel.status }}</strong></p>
      <hr>
    </div>
      
  </div>  
</template>  
  
<script>  
export default {  
  name: 'NovelDisplay',  
  props: {  
    novel: {  
      type: Object,  
      required: true,  
      default: () => ({}), // 虽然这里设置了默认空对象，但通常在实际使用中应确保传入有效数据  
    //   validator: (value) => {  
    //     // 这里可以添加额外的验证逻辑，确保novel对象包含必要的属性  
    //     return value.title && value.author && value.description && value.coverImage;  
    //   },  
    },  
  },  
  methods: {  
    novelDetail(id) {
      this.$router.push({ name: 'novelDetail', params: { id: id } });
    },
  },
};  
</script>  
  
<style scoped>  
.novel-display {  
  display: flex;  
  align-items:center;  
  max-width: 600px;  
  margin: 0 10px;  
  padding: 20px;  
  border: 1px solid #ddd;  
  border-radius: 10px;  
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);  
}  
  
.cover-image {  
  max-width: 150px;  
  max-height: 200px;  
  border-radius: 10px;  
  margin-right: 20px;  
}  
  
.info {  
  flex: 1;  
}  
  
.info h1 {  
  margin: 0 0 10px;  
  font-size: 24px;  
}  
  
.info p {  
  margin: 5px 0;  
  font-size: 16px;  
  color: #555;  
}  
  
.info strong {  
  font-weight: bold;  
  color: #333;  
}  
</style>